@mixin btn
  display: inline-block
  margin-bottom: 0 // For input.btn
  font-weight: $btn-font-weight
  text-align: center
  vertical-align: middle
  touch-action: manipulation
  cursor: pointer
  background-image: none // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 1px solid transparent
  white-space: nowrap
  @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $border-radius-base)
  @include user-select(none)
  -moz-transition-property: background-color, color
  -moz-transition-duration: .2s
  -moz-transition-timing-function: ease-out
  -webkit-transition-property: background-color, color
  -webkit-transition-duration: .2s
  -o-transition-property: background-color, color
  -o-transition-duration: .2s
  padding: 6px

  &,
  &:active,
  &.active
    &:focus,
    &.focus
      @include tab-focus


  &:hover,
  &:focus,
  &.focus
    color: $btn-default-color
    text-decoration: none
    outline: none

  &:hover,
  a
    text-decoration: none
    -moz-transition-property: background-color, color
    -moz-transition-duration: .2s
    -moz-transition-timing-function: ease-out
    -webkit-transition-property: background-color, color
    -webkit-transition-duration: .2s
    -o-transition-property: background-color, color
    -o-transition-duration: .2s

  &:active,
  &.active
    outline: 0
    background-image: none
    @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125))

  &.disabled,
  &[disabled],
  fieldset[disabled] &
    pointer-events: none // Future-proof disabling of clicks
    @include opacity(.65)
    @include box-shadow(none)

@mixin btn-default
  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border)
  color: $gray-dark
  &:hover,
  &:focus,
  &:active,
  &.active,
  &.disabled,
  &[disabled]
    background-color: $white
    color: $brand-primary
    border: 1px solid $brand-primary

@mixin btn-primary
  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border)

@mixin btn-secundary
  background-color: $gray-lighter
  color: $gray-dark
  &:hover,
  &:focus,
  &:active,
  &.disabled,
  &[disabled]
    background-color: darken($gray-light, 20%)
    color: $black
  &.active
    font-weight: bold
    background-color: darken($gray-light, 20%)
    color: $black
